<!-- 常见的的八个Hook钩子函数测试 -->
<template>
  <div id="app">
    <p>Count: {{ count }}</p>
    <button @click="count += 1">点击</button><br /><br />
    <button @click="removeComponent">点击销毁组件</button>
    <v-if></v-if>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 1,
    };
  },
  watch: {
    // 每当 count 改变时，这个函数就会执行
    count(newValue, oldValue) {
      alert(`count从 ${oldValue} 增加到了 ${newValue}`);
    },
  },
  methods: {
    removeComponent() {
      // 在点击按钮时，调用销毁方法来卸载组件
      this.$destroy();
    },
  },
  beforeCreate() {
    console.log(`the vue is beforeCreate.`);
  },
  created() {
    console.log(`the vue is created.`);
  },
  beforeMount() {
    console.log(`the vue is beforeMount.`);
  },
  mounted() {
    console.log(`the vue is mounted.`);
  },
  beforeUpdate() {
    console.log(`the vue is beforeUpdate.`);
  },
  updated() {
    console.log(`the vue is updated.`);
  },
  beforeDestroy() {
    console.log(`the vue is beforeDestroy.`);
  },
  destroyed() {
    console.log(`the vue is destroyed.`);
  },
};
</script>

